﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/element-ui/index.js"></script>
    <script src="/static/js/common.js"></script>
    <div id="app">
        <template>
            <!--<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>-->

        </template>
        <el-checkbox-group v-model="checkedCities">
            <el-checkbox v-for="city in cities" :label="city.key">{{city.value}}</el-checkbox>
        </el-checkbox-group>


        <el-cascader :options="options"
                     v-model="value"
                     @change="handleChange"
                  :show-all-levels="false"
                     clearable></el-cascader>
    </div>
    <script>
        //const cityOptions = ['上海', '北京', '广州', '深圳'];
        var cityOptions = [{ key: '1', value: '上海' },
        { key: '2', value: '北京' },
        { key: '3', value: '广州' },
        { key: '4', value: '深圳' }];
        var Main = {
            data() {
                return {
                    value: ['zhinan','shejiyuanze','yizhi'],
                    options: [{
                        value: 'zhinan',
                        label: '指南',
                        children: [{
                            value: 'shejiyuanze',
                            label: '设计原则',
                            children: [{
                                value: 'yizhi',
                                label: '一致'
                            }, {
                                value: 'fankui',
                                label: '反馈'
                            }]
                        }]
                    }],




                    checkAll: false,
                    //checkedCities: ['上海', '北京'],
                    checkedCities: ["1", "2"],
                    cities: cityOptions,
                    isIndeterminate: true
                };
            },
            methods: {
                handleChange(value) {
                    console.log(value);
                },
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                handleCheckAllChange(val) {
                    this.checkedCities = val ? cityOptions : [];
                    this.isIndeterminate = false;
                },
                handleCheckedCitiesChange(value) {
                    console.log('h', value);
                    console.log('h2', this.checkedCities);
                    let checkedCount = value.length;
                    this.checkAll = checkedCount === this.cities.length;
                    this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                }
            }
        };
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    </script>
</body>
</html>